<template>
    <div class="queryBox">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span> 数据列表 </span>
        </div>
        <div class="right">
            <el-button @click="Jump">添加</el-button>
        </div>
    </div>
    <div>
        <el-table :data="list" style="width: 100%" border @select="handleSelectionChange">
            <el-table-column align="center" type="selection" width="55" v-model="checkList" />
            <el-table-column align="center" prop="id" label="编号" />
            <el-table-column align="center" prop="name" label="属性名称" />
            <el-table-column align="center" prop="filterType" label="商品类型">

            </el-table-column>
            <el-table-column align="center" prop="handAddStatus" label="属性是否可选">
                <template #default="{ row }">
                    <div>{{ formateString(row.handAddStatus) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="inputType" label="属性值的录入方式">
                <template #default="{ row }">
                    <div>{{ formateString1(row.inputType) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="inputList" label="可选值列表" />
            <el-table-column align="center" prop="sort" label="排序">
            </el-table-column>
            <el-table-column align="center" prop="email" label="操作">
                <template #default="{ row }">
                    <el-button @click="edit(row.id)">编辑</el-button>
                    <el-button type="danger" @click="deleteList(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="bottomBox">
        <div class="bottomLeft">
            <el-select v-model="type" placeholder="批量操作">
                <el-option label="删除" :value="0" />
            </el-select>
            <el-button type="primary" @click="determine">确定</el-button>
        </div>
        <div class="page">
            <ElConfigProvider :locale="zhCn">
                <el-pagination v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
                    :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                    :total="total" @size-change="twoAttributeList" @current-change="twoAttributeList" />
            </ElConfigProvider>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ElTable, ElTableColumn, ElButton, ElConfigProvider, ElPagination, ElMessageBox, ElMessage } from 'element-plus';
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { attributeJumpAPI, deleteAttributeListAPI } from './api';
import { reactive, ref } from 'vue';
import { useRoute } from "vue-router";
import { ArrowRight, Tickets } from "@element-plus/icons-vue";
import router from '@/router';
import updateProductAttr from './updateProductAttr.vue';

const route = useRoute()

const routeParams: IAttributeJumpRouteParams = route.query

const total = ref(0)

const list = ref<IAttributeJumpList[]>([])

const params = reactive({
    pageNum: 1,
    pageSize: 5,
});
const type = ref();

// 复选框
const checkList = ref<number[]>([]);
// 多选框选中事件
const handleSelectionChange = (val: IBrandList[]) => {
    val.forEach((item) => {
        const p = list.value.find((p) => p.id === item.id);
        p && checkList.value.push(item.id as any);
    });
};
// 点击确定
const determine = () => {
    if (checkList.value.length === 0) {
        ElMessage.warning("请选择一条记录");
    } else {
        if (type.value === 0) {
            deleteAttributeListAPI(checkList.value).then((res) => {
                if (res.code === 200) {
                    ElMessage.success("修改成功");
                    attributeList()
                } else {
                    ElMessage.success("修改失败请联系管理员");
                }
            });
        }
    }
};

const formateString = (val: number) => {
    if (val === 0) {
        return "唯一"
    } else if (val === 1) {
        return "单选"
    } else {
        return "复选"
    }
}
const formateString1 = (val: number) => {
    if (val === 0) {
        return "手工录入"
    } else {
        return "从下面列表中选择"
    }
}

// 页面数据请求
const attributeList = () => {
    attributeJumpAPI(routeParams.cid, routeParams.pageNum, routeParams.pageSize, routeParams.type).then((res) => {
        if (res.code === 200) {
            list.value = res.data.list
            console.log(list);

            total.value = res.data.total
            params.pageNum = res.data.pageNum
            params.pageSize = res.data.pageSize
        }
    })
}


// 分页请求
const twoAttributeList = () => {
    attributeJumpAPI(routeParams.cid, params.pageNum, params.pageSize, routeParams.type).then((res) => {
        list.value = res.data.list
    })
}

// 跳转添加页面
const Jump = () => {
    router.push(`/pms/addProductAttr?cid=${routeParams.cid}&type=${routeParams.type}`)
}

// 删除单个
const deleteList = (id: number) => {
    ElMessageBox.confirm("是否删除该品牌", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            deleteAttributeListAPI([id]).then((res) => {
                ElMessage({
                    type: "success",
                    message: "删除成功",
                });
                attributeList()
            });
        })
        .catch(() => { });
};

// 跳转到编辑页面
const edit = (id: number) => {
    router.push(`/pms/updateProductAttr?id=${id}`)
}

attributeList()

</script>
<style lang="less" scoped>
.queryBox {
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

    .left {
        font-size: 15px;
    }
}

.bottomBox {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;

    .bottomLeft {
        :deep(.el-button) {
            margin-left: 20px;
        }
    }
}
</style>